<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加使用者</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        table {
            background-color: #FFFFFF;
            width: 100%;
            height: 100%;
        }

        .t1 {
            width: 100px;
            text-align: center;
        }

        .t2 {
            width: 250px;
        }
    </style>
    <script src="systemManager/js/addUser.js"></script>
</head>
<body>
<section class="content-header">
    <ol class="breadcrumb">
        <li><i class="fa fa-dashboard"></i>首页</li>
        <li>系统管理</li>
        <li>使用者及权限管理</li>
        <li>新建使用者</li>
    </ol>
    <div class="clearfix"></div>
</section>
<div>
    <!-- 使用者信息 -->
    <div>
        <table class="table">
            <tr>
                <td class="t1">使用者账号*</td>
                <td class="t2">
                    <input id="tel" type="text" class="form-control" onblur="addUsercheckTel()"/>
                    <span id="validateTel" style="color: green;"></span>
                </td>
                <td class="t1">使用者名称*</td>
                <td class="t2">
                    <input id="nickname" type="text" class="form-control" onblur="addUserchecknickname()"/>
                    <span id="validatenickname" style="color: green;"></span>
                </td>
            </tr>
            <tr>
                <td class="t1">密码*</td>
                <td class="t2">
                    <input id="password1" type="password" class="form-control"/>
                    <span id="passwordmsg1" style="color: green;"></span>
                </td>
                <td class="t1">确认密码*</td>
                <td class="t2">
                    <input id="password2" type="password" class="form-control" onblur="checkPassword()"/>
                    <span id="passwordmsg" style="color: green;"></span>
                </td>
            </tr>
            <tr>
                <td class="t1">所属银行*</td>
                <td class="t2">
                    <select class="form-control select2" id="selectCompany"></select>
                </td>
                <td class="t1">所属机构*</td>
                <td class="t2">
                    <select class="form-control select2" id="selectOrg"></select>
                </td>
            </tr>
            <tr>
                <td class="t1">入职时间*</td>
                <td class="t2">
                    <input id="entrytime" type="date" class="form-control"/>
            </tr>
            <tr>
                <td class="t1">联系人姓名</td>
                <td class="t2">
                    <input id="linkmanname" type="text" class="form-control"/>
                </td>
                <td class="t1">联系电话</td>
                <td class="t2">
                    <input id="linkmantel" type="text" class="form-control"/>
                </td>
            </tr>
            <tr>
                <td class="t1">公司电话</td>
                <td class="t2">
                    <input id="companytel" type="text" class="form-control"/>
                </td>
                <td class="t1">Email</td>
                <td class="t2">
                    <input id="email" type="text" class="form-control"/>
                </td>
            </tr>
        </table>
    </div>
    <!-- 使用者信息结束 -->

    <!-- 使用者角色 -->
    <div>
        <table class="table">
            <tr>
                <td class="t1">可选职责（角色）</td>
                <td class="t1">已选职责（角色）</td>
            </tr>
            <tr>
                <td class="t1">
                    <select style="width: 350px;" id="leftID" size="10" multiple="multiple"
                            class="form-control select2">
                    </select>
                </td>
                <td class="t1">
                    <select style="width: 350px;" id="rightID" size="10" multiple="multiple"
                            class="form-control select2"></select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td style="float: right;">
                    <button id="saveBtn1" class="btn btn-primary my-btn" onclick="saveUserInfo()"><i
                            class="fa fa-save button-in-i"></i>保存
                    </button>
                    <button class="btn btn-default my-btn" onclick="loadPage('systemManager/systemMain.html');"><i
                            class="fa fa-backward button-in-i"></i>返回
                    </button>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
<script type="text/javascript">
    document.getElementById("leftID").ondblclick = function () {
        var optionElement = this[this.selectedIndex];
        document.getElementById("rightID").appendChild(optionElement);
    }
    document.getElementById("rightID").ondblclick = function () {
        var optionElement = this[this.selectedIndex];
        document.getElementById("leftID").appendChild(optionElement);
    }
    document.getElementById("rightMoveAllID").onclick = function () {
        var leftSelectElement = document.getElementById("leftID");
        var size = leftSelectElement.length;
        for (var i = 0; i < size; i++) {
            var optionElement = leftSelectElement.options[0];
            document.getElementById("rightID").appendChild(optionElement);
        }
    }
    document.getElementById("rightMoveID").onclick = function () {
        var selectElement = document.getElementById("leftID");
        var optionElements = selectElement.getElementsByTagName("option");
        for (var i = 0; i < optionElements.length; i++) {
            if (optionElements[i].selected == true) {
                document.getElementById("rightID").appendChild(optionElements[i]);
                i = i - 1;//解释为什么要减一，
                //每次移动那个option后，那个option就会被删除，
                //所以需要把index移动到被删除的那个option的前一个index那里才可以。
            }
        }
    }

</script>

</html>
